<template>
  <div class="home-bg">
    <div class="home-header-bar">
      <el-menu :default-active="active" mode="horizontal" background-color="#222" text-color="#fff" active-text-color="#ffd04b" class="home-menu">
        <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index" @click="go(item.path)">
          {{ item.label }}
        </el-menu-item>
      </el-menu>
      <el-dropdown trigger="hover" @command="onLoginSelect">
        <el-button class="login-btn-top" type="primary">登录</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="student">学生登录</el-dropdown-item>
            <el-dropdown-item command="teacher">教师登录</el-dropdown-item>
            <el-dropdown-item command="admin">管理员登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="home-content">
      <div class="home-title">大学生创新项目管理系统</div>
      <div class="card-list">
        <el-card v-for="card in cards" :key="card.title" class="home-card" @click="go(card.path)" style="cursor:pointer;">
          <img :src="card.img" class="card-img" />
          <div class="card-title">{{ card.title }}</div>
        </el-card>
      </div>
      <el-button class="more-btn" type="primary" @click="go('/projects')">查看更多>></el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

const menuList = [
  { path: '/', label: '首页', index: '1', match: /^\/$/ },
  { path: '/projects', label: '项目展示', index: '2', match: /^\/projects/ },
  { path: '/vote-result', label: '投票结果', index: '3', match: /^\/vote-result/ },
  { path: '/post-platform', label: '互动平台', index: '4', match: /^\/post-platform/ },
  { path: '/notices', label: '公告通知', index: '5', match: /^\/notices/ },
  { path: '/user-center', label: '个人中心', index: '6', match: /^\/user-center/ },
  { path: '/admin', label: '后台管理', index: '7', match: /^\/admin/ },
];

function getActiveIndex(path) {
  const found = menuList.find(item => item.match.test(path));
  return found ? found.index : '1';
}
const active = ref(getActiveIndex(route.path));
watch(() => route.path, (newPath) => { active.value = getActiveIndex(newPath); });
function go(path) { router.push(path); active.value = getActiveIndex(path); }

const cards = [
  { title: '首页', img: 'https://img.icons8.com/color/144/home--v2.png', path: '/' },
  { title: '项目展示', img: 'https://img.icons8.com/color/144/blueprint.png', path: '/projects' },
  { title: '投票结果', img: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f5f3.png', path: '/vote-result' },
  { title: '互动平台', img: 'https://img.icons8.com/color/144/chat.png', path: '/post-platform' },
  { title: '公告通知', img: 'https://img.icons8.com/color/144/news.png', path: '/notices' },
  { title: '个人中心', img: 'https://img.icons8.com/color/144/user-male-circle--v2.png', path: '/user-center' },
  { title: '后台管理', img: 'https://img.icons8.com/color/144/administrator-male.png', path: '/admin' },
];

function onLoginSelect(role) {
  router.push(`/login?role=${role}`);
}
</script>
<style scoped>
.home-bg {
  min-height: 100vh;
  background: #ededed;
}
.home-menu {
  box-shadow: 0 2px 8px #f0f1f2;
}
.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 80vh;
}
.home-title {
  font-size: 32px;
  font-weight: bold;
  color: #222;
  margin: 32px 0 32px 0;
  letter-spacing: 2px;
}
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-bottom: 32px;
}
.home-card {
  width: 220px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e0e0e0;
  padding: 16px 8px 0 8px;
}
.card-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 16px;
}
.card-title {
  text-align: center;
  font-size: 18px;
  color: #666;
  margin-top: 8px;
}
.more-btn {
  width: 200px;
  margin-top: 12px;
  background: #222;
  border: none;
}
.home-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.login-btn-top {
  margin-right: 32px;
  margin-top: 8px;
  background: #b6d43a;
  color: #222;
  border: none;
  font-weight: bold;
  border-radius: 8px;
}
</style> 